(function ($) {
    // TODO: 仅为了使用 VXE Table 就使用了多个比较大的 JS 库，后续视情况考虑是否精简
    const { createApp, h } = window.Vue;
    const { VxeTooltip, VXETable, VxeUI } = window;
    let originTableData = null;

    // 数字动画效果
    function animateCounter(elementId, target) {
        const $element = $(`#${elementId}`);
        const duration = 2000; // 动画时长(ms)
        const start = 0;
        const increment = target / (duration / 16);

        let current = start;
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                clearInterval(timer);
                $element.text(typeof target === 'string' ? target : Math.round(target))
            } else {
                $element.text(Math.round(current))
            }
        }, 16);
    }

    // 千分位格式化
    function formatNumber(num) {
        return num.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }

    /**
     * 从 _51la 初始化配置中提取 siteId
     * @returns {string|null} 返回站点ID或null（未配置时）
     */
    function get51LaSiteId() {
        if (!window._51la || !Array.isArray(window._51la)) return null;

        // 遍历 _51la 初始化配置数组
        for (const item of window._51la) {
            if (typeof item === 'object' && item.id) {
                return item.id;
            }
        }
        return null;
    }

    // 从 51.LA 获取访客统计（需配置 siteId 和 ckey）
    function fetch51LaVisitorStats() {
        const siteId = get51LaSiteId();

        if (!siteId) {
            console.warn('[stats] 未检测到51.LA siteId');
            return;
        }

        // 使用 _51la 回调
        (window._51la = window._51la || []).push(function() {
            this.getSiteTrend({
                siteId,
                type: 'uv', // 可选: pv/ip/uv
                callback(res) {
                    if (res?.code === 200) {
                        animateCounter('visitorCount', formatNumber(res.data.today));
                    } else {
                        console.warn('[stats] 51.LA API错误:', res?.message || '未知错误');
                    }
                }
            });
        });
    }

    // 控制新增标识隐藏
    function toggleNewSiteTips(hidden = false) {
        if (hidden) {
            $('.new-site-tips').hide();
        } else {
            $('.new-site-tips').show();
        }
    }

    // 提取站点分类
    function extraCategory(category, index) {
        return (category || '').split('/')[index]?.trim() || '-';
    }

    // 提取 URL 的域名信息
    function getUrlDomain(url) {
        if (!url) return '-';
        try {
            const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`);
            return urlObj.hostname.replace('www.', '').toLowerCase();
        } catch {
            return url.toLowerCase();
        }
    }

    // 创建 Vue 应用
    const app = createApp({
        data() {
            return {
                gridOptions: {
                    border: true, // 是否带有边框
                    round: true, // 是否为圆角边框
                    showFooter: false, // 是否显示底部
                    showOverflow: false, // 当内容过长时显示为省略号
                    scrollY: { // 纵向虚拟滚动配置
                        enabled: true, // 总开关
                        gt: 10 * 1000, // 指当总行数大于指定行数时自动开启
                    },
                    loading: true, // 是否显示加载状态
                    keepSource: true, // 是否保留原始数据
                    height: 800, // 表格最大高度
                    width: "100%", // 表格宽度
                    padding: false, // 禁用默认内边距
                    style: {      // 直接注入样式
                        'margin': '20px',
                        'border-radius': '4px'
                    },
                    layouts: ["Top", "Toolbar", "Form", "Table", "Bottom", "Pager"], // 自定义布局
                    loadingConfig: { // 加载状态配置
                        icon: 'vxe-icon-spinner roll',
                        text: '加载中...'
                    },
                    emptyText: "暂无数据", // 空数据时显示的文本
                    // 列配置
                    columnConfig: {
                        resizable: false, // 每一列是否启用列宽调整
                        useKey: true, // 是否需要为每一列的 VNode 设置 key 属性
                        isCurrent: false, // 当鼠标点击列头时，是否要高亮当前列
                        isHover: false, // 当鼠标移到列头时，是否要高亮当前头
                    },
                    // 行配置
                    rowConfig: {
                        keyField: "_X_ROW_KEY", // 自定义行数据唯一主键的字段名（默认自动生成）
                        isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
                        isHover: true, // 当鼠标移到 行 时，是否要高亮当前行
                        resizable: false, // 每一行开启调整行高度
                        useKey: true, // 是否需要为每一行的 VNode 设置 key 属性
                    },
                    // 当前行配置
                    currentRowConfig: {
                        isFollowSelected: true, // 当选择行时，是否要高亮当前行
                    },
                    // 当前列配置
                    currentColumnConfig: {
                        isFollowSelected: true, // 当选择列时，是否要高亮当前列
                    },
                    // 单元格配置
                    cellConfig: {
                        height: "auto", // 设置固定行高
                    },
                    // 分页配置
                    pagerConfig: {
                        enabled: true, // 是否启用
                        pageSize: 10,
                        pageSizes: [10, 20, 50, 100, { label: "全量数据", value: -1 }],
                        layouts: ['Home', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'End', 'Sizes', 'Total'],
                        perfect: true,
                        border: true, // 带边框
                        background: true, // 带背景颜色
                        autoHidden: false, // 当只有一页时自动隐藏
                    },
                    // 筛选配置
                    filterConfig: {
                        remote: false, // 所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理
                        iconNone: "vxe-icon-funnel-clear", // 自定义无条件时显示的图标
                        iconMatch: "vxe-icon-funnel", // 自定义带条件时显示的图标
                    },
                    // 排序配置
                    sortConfig: {
                        multiple: false, // 是否启用多列组合筛选
                        chronological: true, // 只对 multiple 有效，是否按照先后触发顺序进行排序
                        iconAsc: "vxe-icon-caret-up", // 自定义升序的图标
                        iconDesc: "vxe-icon-caret-down", // 自定义降序的图标
                    },
                    // 工具栏配置
                    toolbarConfig: {
                        buttons: [], // 用于自定义按钮的外观和行为
                        custom: false, // 是否启用自定义列
                        print: false, // 是否启用打印
                        refresh: false, // 是否启用刷新
                        import: false, // 是否启用导入
                        export: false, // 是否启用导出
                    },
                    // 展开行配置（不支持虚拟滚动）
                    expandConfig: {
                        trigger: "cell", // 触发展开行的方式设置为单元格
                        height: 0, //设置展开容器的高度，当内容超出后会出现滚动条
                    },
                    // 鼠标配置
                    mouseConfig: {
                        selected: true, // 开启单元格选中功能（只对 edit-config.mode=cell 有效）
                    },
                    // 按键配置
                    keyboardConfig: {
                        isArrow: true, // 开启方向键功能
                        isEnter: true, // 开启回车键功能
                        isTab: true, // 开启 Tab 键功能
                        isDel: false, // 开启删除键功能，用于 edit-config.mode 和 column.editRender 编辑模式
                    },
                    // 右键菜单配置
                    menuConfig: {
                        enabled: true, // 是否启用
                        className: "my-menus", // 菜单面板的 className
                        body: {
                            // 内容的右键菜单
                            options: [
                                // 菜单配置
                                [{
                                    code: "copy", // 菜单键值
                                    name: "复制", // 菜单名称（支持开启国际化）
                                    prefixConfig: {
                                        // 前缀图标配置
                                        icon: "vxe-icon-copy",
                                    },
                                    className: "copy-table-item", // 菜单项的 className
                                    visible: true, // 是否可视
                                    disabled: false, // 是否禁用
                                }],
                            ],
                        },
                    },
                    // 自定义列配置
                    columns: [
                        {
                            field: 'seq',
                            type: 'seq',
                            width: 80,
                            align: "center",
                        },
                        {
                            field: 'category1',
                            title: '主分类',
                            align: 'center',
                            width: '110',
                            sortable: true,
                            formatter: ({ row }) => {return extraCategory(row.category, 0)},
                        },
                        {
                            field: 'category2',
                            title: '子分类',
                            width: '110',
                            align: 'center',
                            sortable: true,
                            formatter: ({ row }) => {return extraCategory(row.category, 1)},
                        },
                        {
                            field: 'title',
                            title: '站点名称',
                            sortable: true,
                        },
                        {
                            field: 'description',
                            title: '站点描述',
                            sortable: false,
                        },
                        {
                            field: 'url',
                            title: '站点域名',
                            sortable: true,
                            sortBy: ({row}) => {return getUrlDomain(row.url)},
                            slots: {
                                default: ({ row }) => h('a', {
                                    href: row.url || '#',
                                    target: '_blank',
                                    rel: 'noopener noreferrer',
                                    style: {
                                        color: '#0d95e8',
                                        'text-decoration': 'underline'
                                    }
                                }, getUrlDomain(row.url))
                            },
                        },
                        {
                            field: 'update_time',
                            title: '更新时间',
                            width: '125',
                            align: 'center',
                            sortable: true,
                            formatter: ({ cellValue }) => {
                                const date = new Date(cellValue * 1000);
                                return window.AppUtils.formatDateTime(date, window.AppUtils.DATE_FORMATS.DATE_ONLY);
                            },
                        }
                    ],
                    // 表格数据
                    data: [],
                    // 数据合并
                    mergeCells: [],
                    // 底部数据
                    footerData: [
                    ]
                }
            }
        },
        methods: {
            // 获取新站点数据
            async fetchData() {
                this.gridOptions.loading = true;
                try {
                    const response = await fetch('/site-list.json');
                    const data = await response.json();

                     // 1. 更新网站数量统计（带动画效果）
                    animateCounter('siteCount', data.meta.stats.valid || 0);

                    // 2. 更新表格数据
                    this.gridOptions.data = Object.entries(data.sites)
                        .map(([url, entity]) => ({
                            url,
                            ...entity,
                            update_time: entity.update_time
                        }))
                        .filter(site => site.status === 'new')
                        .sort((a, b) => a.category.localeCompare(b.category));
                    originTableData = this.gridOptions.data; // 保留原始数据

                    // 3. 更新分页器总记录数
                    this.gridOptions.pagerConfig.total = this.gridOptions.data.length;

                    if (this.gridOptions.data.length === 0) {
                        toggleNewSiteTips(true);
                    } else {
                        toggleNewSiteTips(false);
                    }
                } catch (error) {
                    console.error('新站点资源获取失败:', error);
                    toggleNewSiteTips(true);
                } finally {
                    this.gridOptions.loading = false;
                }
            },
            // 分页事件处理
            // TODO: 【性能优化】由于站点稳定后新增站点的数据量一般不大，性能影响较小，所以暂不考虑后端分页
            handlePageChange({ currentPage, pageSize }) {
                // 更新分页配置
                this.gridOptions.pagerConfig = {
                    ...this.gridOptions.pagerConfig,
                    currentPage,
                    pageSize,
                    previousPage: currentPage,
                };

                // 前端分页（数据已全量加载）
                const start = (currentPage - 1) * pageSize;
                this.gridOptions.data = originTableData.slice(start, start + pageSize);
            },
            toggleTheme() {
                VxeUI.setTheme(window.darkMode? 'dark': 'light');
            },
            // 打开弹窗
            handleOpenDialog() {
                // 获取表格实例
                const tableRef = this.$refs.newSiteGridRef;
                // 清除表格所有条件，还原到初始状态
                tableRef.clearAll();
                // 显示弹窗
                $('#new-site-modal').modal('show');
            },
        },
        async mounted() {
            await this.fetchData();

            // 绑定查看按钮事件
            $('#view-new-site-btn').on('click', () => {
                // 检查表格是否为空，如果为空则尝试重新加载一次数据
                if (this.gridOptions.data.length === 0) {
                    this.fetchData();
                }
                // 初始化分页
                this.handlePageChange({
                    currentPage: 1, // 默认第一页
                    pageSize: this.gridOptions.pagerConfig.pageSize // 使用默认分页大小
                });
                // 切换主题
                this.toggleTheme();
                // 显示模态框
                this.handleOpenDialog();
            });
        }
    });

    // 注册Vxe组件
    app.use(VXETable);
    app.use(VxeTooltip);

    // 挂载应用
    app.mount('#new-site-table');

    // 更新访客统计
    fetch51LaVisitorStats();
})(window.jQuery);